import React, { useState, useRef, useContext } from 'react'
const Add = (props) => {
    const iname = useRef()
    const icontent = useRef()
    const myadd = (params) => {
        const name = iname.current.value;
        const content = icontent.current.value;
        props.add({ name, content })
    }
    return (<>
        用户名 <br />
        <input type="text" ref={iname} /> <br />
        评论 <br />
        <input type="text" ref={icontent} /> <br />
        <button onClick={myadd} >提交</button> <br />
        评论回复 <br />
    </>)
}
const List = (props) => {
    const { list } = props
    return <ul>{
        list.map((item, i) => {
            return (
                <li key={i}>
                    <div>{item.name}---- <button onClick={() => props.del(i)}>删除</button> </div>
                    <div>{item.content}</div>
                </li>
            )
        })}
    </ul>
}
// const ct =  useContext()
/* 函数式组件 */
function Test0201() {
    const [list, setList] = useState([
        { name: "张三", content: "水电费" },
        { name: "李四", content: "222" },
    ])
    const add = (obj) => {
        list.push(obj)
        const nlist = [...list]
        setList(nlist)
    }
    const del = (i) => {
        list.splice(i, 1);
        const nlist = [...list]
        setList(nlist)
    }
    return (
        <div>
            <Add add={add}></Add>
            <List list={list} del={del}></List>
        </div>
    )
}
export default Test0201
